<template>
  <div>
    <div class="demo">
      <h1>学生姓名：{{name}}</h1>
      <h1>年龄：{{age+1}}</h1>
      <button @click="sendName">发送学生名称</button>

      <button @click="unbind">解绑sendStudentName事件</button>

      <h2>当前n为: {{n}}</h2>
      <button @click="add">点我+1</button>
      <button @click="death">销毁当前Student组件实例(vc)</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      msg: 'hello',
      name: "张三",
      age: 12,
      n: 0
    }
  },
  methods: {
    add() {
      console.log('add被调用了。。')
      this.n++
    },
    sendName() {

      //触发app自定义事件 sendStudentName
      this.$emit('sendStudentName', this.name,1,3,4)

      // this.$emit('demo')
      // this.$emit('click')
    },
    unbind() {
      this.$off('sendStudentName') //解绑一个事件

      // this.$off(['sendStudentName','demo']) //解绑多个事件

      // this.$off() //解绑全部自定义事件
    },

    death() {
      this.$destroy();//销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。

    }
  }

}
</script>

<style scoped lang="css">
  .demo {
    background: orange;
    margin: 10px 0;
  }

</style>